<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="收货地址" @click-left="onClickLeft" fixed>
    <template #left>
      <van-icon name="arrow-left" size="24" color="#000" />
    </template>
  </van-nav-bar>

  <div class="address-list-container">
    <van-address-list
      v-model="chosenAddressId"
      :list="userStore.receivingAddress"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>

  <van-action-sheet v-model:show="show" title="新增地址">
    <van-address-edit
      :area-list="areaList"
      show-delete
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </van-action-sheet>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Toast } from 'vant';
// 引入全国地址数据
import { areaList } from '@vant/area-data';
// 
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
const chosenAddressId = ref('1');
const list = reactive([]);
onMounted(() => {
  // list.push(...userStore.receivingAddress)
})

const show = ref(false);

const onAdd = () => {
  show.value = true
}
const onEdit = (item, index) => {
  console.log(item);
}


const onSave = (content) => {
  // list.push(content)
  content.address = content.province + content.city + content.county + content.addressDetail
  userStore.receivingAddress.push(content)
  show.value = false
}
const onDelete = () => Toast('delete');

// 点击左侧按钮返回上级路由
const onClickLeft = () => {
  history.back()
}
</script>

<style scoped>
.address-list-container {
  margin-top: 46px;
  padding-bottom: 50px;
}
</style>
